<template>
  <div class="main-box">
    <div class="select-box">
      <div style="margin-bottom: 10px;">
        <div class="select-input-box">
          <el-input class="select-input" placeholder="可输入名称或者其他关键字搜索..." v-model="formData.keyword" @change="getPageList">
            <template #prefix>
              <el-icon class="el-input__icon" size="18">
                <search/>
              </el-icon>
            </template>
          </el-input>
        </div>

      </div>

      <!--筛选条件-->
      <div class="form-box" :class="{'form-box-all': isShow}">
        <el-form :model="formData" :label-width="80">
          <el-form-item class="form-item-box">
            <template #label>
              <div style="display: flex;align-items: center">
                <span>类目</span>
                <el-tooltip
                    effect="dark"
                    content="根据产品类目快速查找擅长拍摄的模特"
                    placement="top"
                >
                  <el-icon :size="12">
                    <QuestionFilled/>
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <el-checkbox-group v-model="formData.cat_id" fill="#5695c0" @change="getPageList()">
              <el-checkbox-button class="el-checkbox-button--default" v-for="item in catList" :key="'cat_'+item.id"
                                  :value="item.id">
                {{ item.name }}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="性别" class="form-item-box">
            <el-radio-group fill="#5695c0" v-model="formData.sex" @change="getPageList()">
              <el-radio-button class="el-radio-button--default" border :value="1">男</el-radio-button>
              <el-radio-button class="el-radio-button--default" border :value="2">女</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发布平台" class="form-item-box">
            <el-radio-group fill="#5695c0" v-model="formData.platform_id">
              <template v-for="item in platformList" :key="'platform_'+item.id">
                <el-radio-button class="el-radio-button--default" border :value="item.id">
                  {{ item.name }}
                </el-radio-button>
              </template>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="国家" class="form-item-box">
            <el-radio-group fill="#5695c0" v-model="formData.country_id">
              <template v-for="item in countryList" :key="'country_'+item.id">
                <el-radio-button class="el-radio-button--default" border :value="item.id">
                  {{ item.name }}
                </el-radio-button>
              </template>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="form-right">
          <el-button class="el-button--default" @click="resetList">重置</el-button>
          <div class="set-height-box" @click="isShow = !isShow">
            <span>展开筛选</span>
            <div :class="{'set-height-up': isShow == true}">
              <el-icon>
                <ArrowDown/>
              </el-icon>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="list-box">
      <template v-if="modelList.length>0">
        <div class="list-item" v-for="(item, index) in modelList" :key="index">
          <modelItem :item="item"></modelItem>
        </div>
      </template>
      <template v-else>
        <div class="center-box">
          <el-empty description="暂无数据"/>
        </div>
      </template>
    </div>

    <div class="pagination-box">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :total="modelTotal"/>
    </div>
  </div>


</template>

<script setup lang="ts">
import modelItem from '@/components/modelItem.vue'
import Https from "@/server/index";
import {onMounted, reactive, ref} from "vue";
import store from "@/store";

const formData = reactive({
  keyword: "",
  cat_id: [],
  sex: "",
  platform_id: "",
  country_id: "",
  pageNum: 1,
})
const isShow = ref(false);
const platformList = ref([
  {id: "",name: ""}
]);
const countryList = ref([
  {id: "",name: ""}
]);
const modelTotal = ref(0);
const catList = ref([
  {id: "",name: ""}
]);
const modelList = ref([]);

const resetList = ()=>{
  formData.keyword = "";
  formData.cat_id = [];
  formData.sex = "";
  formData.platform_id = "";
  formData.country_id = "";
  formData.pageNum = 1;
  getPageList();
}

const getPageList = () => {
  modelList.value = [];
  let data = {
    keyword: formData.keyword,
    cat_id: formData.cat_id.length?formData.cat_id.join(","): "",
    sex: formData.sex,
    platform_id: formData.platform_id,
    country_id: formData.country_id,
    shop_type: 1,
    pageNum: formData.pageNum,
  };
  Https.getModelList(data).then((res: any) => {
    if (res.code === 0) {
      modelList.value = res.data.list;
      modelTotal.value = res.data.pagination.totalCount;
    }
  })
}

// 分页跳转
const handleCurrentChange = (val: number) => {
  formData.pageNum = val;
  getPageList();
}

const getTopList = () => {
  Https.getCatList({}).then((res: any) => {
    if (res.code === 0) {
      catList.value = res.data.list;
      let data = {
        name: "catList",
        value: catList.value
      }
      store.commit('setState', data)
    }
  })

  Https.getPlatformList({}).then((res: any) => {
    if (res.code === 0) {
      platformList.value = res.data.list;
    }
  })

  Https.getCountryList({}).then((res: any) => {
    if (res.code === 0) {
      countryList.value = res.data.list;
    }
  })

}

onMounted(() => {
  getTopList();
  getPageList();
})

</script>

<style scoped lang="scss">
.main-box{
  padding: 0 20px;
}

.el-checkbox-button--default, .el-radio-button--default {
  margin: 0 10px 10px 0;
}

.form-box {
  height: 94px;
  overflow: hidden;
  display: flex;
  position: relative;
  justify-content: space-between;
  transition: height .2s;

  .form-right {
    position: absolute;
    width: 150px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    right: 20px;
    bottom: 20px;

    .set-height-box {
      margin-left: 10px;
      font-size: 14px;
      display: flex;
      align-items: center;
      cursor: pointer;

      span {
        padding-right: 4px;
      }

      div {
        transform-origin: center;
        transition: all .1s;
        display: flex;
        align-items: center;
      }

    }

    .set-height-up {
      transform: rotate(180deg);
    }
  }
}

.form-box-all {
  height: 204px !important;
}

.select-input-box{
  border-radius: 22px;
  width: 400px;
  height: 42px;
  border: 1px solid rgb(204, 223, 255);
  margin-bottom: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .select-input {
    height: 42px;
    border: none !important;

    .el-input__wrapper{
      box-shadow: none !important;
    }

  }
}



.top-list-box {
  padding-left: 10px;
  display: flex;
  align-items: center;
  height: 52px;
  font-size: 14px;
  min-height: 352px;

  .name-box {
    color: #9ba6ba;
    width: 64px;
    margin-right: 14px;
    text-align: right;
  }
}

.list-box {
  padding: 40px 20px 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  min-height: 552px;
}

.list-item {
  width: 20%;
  padding: 0 16px;
  margin-bottom: 30px;
}

//分页
.pagination-box {
  padding: 20px;
  display: flex;
  justify-content: center;
}


</style>